<template>
  <div>
    <a-spin :spinning="loading">
    <a-row type="flex" style='flex-wrap: wrap;'>
      <a-col :xs='24' :sm='12' :md='8' :lg='8' :xl='6' :xxl='4' v-for='item of list' :key='item.id' style='padding: 0 0 20px 20px;'>
        <div style='background: #fff;padding: 20px;border-radius: 10px;' @click="handleDetail(item)">
          <div class='img-wrapper'>
            <img object-fit='contain' :src="item.img || 'http://124.221.121.107:2604/storage/20221017/634d80e15265b.png'"/>
          </div>
          <div class='price1'>
            ￥{{item.is_promote ? item.sale_price : item.shop_price}}
            <span class='price2' v-show='item.is_promote'>{{item.shop_price}}</span>
          </div>
          <div class='title'>{{item.name}}</div>
        </div>
      </a-col>
    </a-row>
    </a-spin>
    <!-- <a-card :loading="loading" style='background: transparent;'>
      <a-card-grid v-for='item of list' :key='item.id' @click="handleDetail(item)" style="width:25%;text-align:center;background: #fff;">
        <div>{{item.name}}</div>
        <div>{{item.shop_price}}</div>
        <div>{{item.promote_price}}</div>
      </a-card-grid>
    </a-card> -->
    <!-- <a-row class='diyRow'>
      <a-col :xs="24" :sm="12" :md="10" :lg="8" :xl="6">
        <a-drawer
          width='100%'
          get-container=".diyRow"
          title="Basic Drawer"
          placement="right"
          :visible="visible"
          @close="onClose"
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </a-drawer>
      </a-col>
    </a-row> -->
    <!-- <a-drawer :width="screenWidth < 576 ? '80%' : '375'" -->
    <a-drawer :width="screenWidth < 576 ? '70%' : '263'"
      title="详情"
      placement="right"
      :visible="visible"
      @close="onClose"
    >
      <div class='img-wrapper'>
        <img object-fit='contain' :src="datailInfo.img || 'http://124.221.121.107:2604/storage/20221017/634d80e15265b.png'"/>
      </div>
      <div class='title'>{{datailInfo.name}}</div>
      <!-- <div>{{datailInfo.is_promote}}</div>
      <div>{{datailInfo.shop_price}}</div>
      <div>{{datailInfo.sale_price}}</div> -->
      <template v-for='item of linkInfo'>
        <div :key='item.id' style='background: #eee;padding: 10px;margin: 20px 0;border-radius: 10px;'>
          <div>{{item.shop_name}}</div>
          <div class='price1'>
            ￥{{item.is_promote ? item.sale_price : item.shop_price}}
            <span class='price2' v-show='item.is_promote'>{{item.shop_price}}</span>
          </div>
        </div>
      </template>
    </a-drawer>
  </div>
</template>

<script>
export default ({
  name: 'Index',
  data () {
    return {
      screenWidth: null,
      q: {},
      loading: false,
      list: [],
      visible: false,
      datailInfo: {},
      linkInfo: []
    }
  },
  watch: {
    '$route': {
      handler () {
        this.q = JSON.parse(this.$route.query.q)
        this.getList()
      },
      immediate: true
    }
  },
  mounted () {
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      return (() => {
          this.screenWidth = document.body.clientWidth
      })()
    }
  },
  methods: {
    async getList () {
      if (Object.keys(this.q).length) {
        this.loading = true
        const res = await this.$http.get('/api/getGoodsList', this.q)
        if (res.code === 0) {
          this.list = res.data
        }
        setTimeout(() => this.loading = false, 1000)
      }
    },
    async handleDetail (value) {
      this.datailInfo = value
      this.visible = true
      const res = await this.$http.get(`/api/getGoodsStore?goods_id=${value.id}&lat=113.544229&lng=22.141416`)
      // console.log(res)
      if (res.code === 0) {
        this.linkInfo = res.data.shop
      }
    },
    onClose () {
      this.visible = false
      this.datailInfo = {}
      this.linkInfo = []
    }
  }
})
</script>

<style scoped lang='stylus'>
.img-wrapper
  position relative
  padding-top 100%
  img
    position absolute
    top 0
    left 0
    width 100%
    height auto
    // border-radius 20px
.price1
  color #ff3366
  font-size 24px
  margin 10px 0
  .price2
    color #999
    font-size 18px
    text-decoration line-through
    font-style oblique
  .title
    color #666
</style>
